<template>
    <div class="change">
      <div class="change-body">
        <div class="back-button">
          <el-button type="primary" @click="goBack">返回上一级</el-button>
        </div>
        <div class="changepart">
          <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
            <el-tab-pane label="二级菜单" name="first">
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                row-class-name="custom-row"
              >
                <el-table-column prop="id" label="编码" class-name="cell-style" />
                <el-table-column
                  prop="title"
                  label="菜单名称"
                  class-name="cell-style"
                />
                <el-table-column
                  prop="prentId"
                  label="菜单级别"
                  class-name="cell-style"
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.prentId === 0 ? "一级菜单" : "二级菜单"
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="desc"
                  label="菜单描述"
                  class-name="cell-style"
                />
                <el-table-column label="操作" width="200" class-name="cell-style">
                  <template slot-scope="scope">
                    <button
                      class="buttn"
                      :disabled="scope.row.isDisabled"
                      @click="handleClick(scope.row)"
                    >
                      <i class="el-icon-zoom-in"></i> 查看下一级
                    </button>
                  </template>
                </el-table-column>
              </el-table>
              <Pagination
                :componentTotal="activityTotal"
                :page="tasklisForm.page"
                @changeRows="setRows"
                @changePage="setPage"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import Pagination from "@/components/Pagination";
  
  export default {
    components: { Pagination },
    data() {
      return {
        activeName: "first",
        tasklisForm: {
          limit: 10,
          page: 1,
        },
        activityTotal: 0,
        tableData: [],
        prentId: 1, // 默认为1，表示一级菜单
      };
    },
    methods: {
      // 分页器
      setRows(val) {
        this.tasklisForm.limit = val;
        this.getMenuData();
      },
      setPage(val) {
        this.tasklisForm.page = val;
        this.getMenuData();
      },
      goBack() {
        this.$router.push({ name: "MenuData" }); // 返回到一级菜单页面
      },
      async getMenuData() {
        try {
          const { data: res } = await this.axios.get(
            `admin/getMenuData?prentId=${this.prentId}&currPage=${
              this.tasklisForm.page - 1
            }&pageNum=${this.tasklisForm.limit}`
          );
          console.log(res);
          this.tableData = res.data.map(item => ({
            ...item,
            isDisabled: item.prentId !== 0 // 根据条件设置是否禁用
          }));
          this.activityTotal = res.total;
        } catch (error) {
          console.error(error);
          this.$message.error("请求失败: " + error.message);
        }
      },
      handleTabClick(tab) {
        // 处理标签点击事件，如果有需要可以在这里添加逻辑
        console.log(tab.name);
      },
      handleClick(row) {
        if (!row.isDisabled) {
          this.$router.push({ name: "menuDatachild", params: { id: row.id } });
        } else {
          this.$message.info("此操作已被禁用");
        }
      }
    },
    mounted() {
      this.getMenuData();
    },
    watch: {
      "$route.params.id": {
        immediate: true,
        handler(newVal) {
          if (newVal) {
            this.prentId = newVal;
            this.getMenuData();
          }
        },
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .change {
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    padding: 20px;
    background-color: #f0f0f0;
    .change-body {
      width: calc(100% - 40px);
      padding: 20px;
      background-color: #fff;
      .changepart {
        width: 100%;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.16);
        padding: 20px;
      }
    }
  }
  #pane-first > div {
    padding: 30px;
    min-width: 1000px;
  }
  .back-button {
    margin-bottom: 20px;
  }
  
  .buttn {
    color: #fff;
    font-size: 12px;
    background-color: #20a0ff;
    border-color: #20a0ff;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
  
    &[disabled] {
      cursor: not-allowed;
      background-color: #d3dce6;
      border-color: #d3dce6;
      color: #909399;
    }
  
    &:hover:not([disabled]) {
      background-color: #409eff;
      border-color: #409eff;
    }
  }
  
  .custom-row {
    height: 45px;
  }
  
  .cell-style {
    font-weight: bold;
    text-align: center;
  }
  </style>